import React, { Component } from 'react'
import Swiper from 'react-id-swiper';
import '@css/home/home_swiper.scss'
import 'react-id-swiper/src/styles/css/swiper.css'

export default class HomeSwiper extends Component{
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return <div className="swiper">
           {this.renderList()}
        </div>
    }
    // 当数据获取到之后，再渲染列表。
    renderList = ()=>{
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                dynamicBullets: true
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false
            },
        }
        if(this.props.swiperList.length > 0){
            return  <Swiper {...params} list={this.props.swiperList}>
                        {this.props.swiperList.map(item=>
                        <div key={item.id}><img src={item.imgUrl}  alt=""/></div>
                        )}
                    </Swiper>
        }
    }
}